import { useAppSelector } from '@shared/lib/hooks/redux'
import classNames from 'classnames'
import { CSSProperties, memo } from 'react'
import styles from './Avatars.module.scss'

export type AvatarsSize = 'big' | 'medium' | 'small' | 'xl'
type AvatarsColor = 'accent-danger' | 'accent-success'

interface AvatarsProps {
  border?: boolean
  borderWidth?: number
  className?: string
  color?: AvatarsColor
  imageUrl?: string
  size?: AvatarsSize
}

export const Avatars = memo(
  ({ border, borderWidth, className, color, imageUrl, size }: AvatarsProps) => {
    const style: CSSProperties = {
      border: border ? `${borderWidth ?? 3}px solid var(--${color})` : '',
    }
    const user = useAppSelector((state) => state.user)
    const allStyles = classNames(
      styles.component,
      {
        [styles['size-big']]: size === 'big',
        [styles['size-medium']]: size === 'medium',
        [styles['size-small']]: size === 'small',
        [styles['size-xl']]: size === 'xl',
      },
      className,
    )

    return (
      <>
        {imageUrl ? (
          <img alt='Avatars' className={allStyles} src={imageUrl} style={style} />
        ) : (
          <div className={allStyles} style={style}>
            {user.name.slice(0, 1)}
          </div>
        )}
      </>
    )
  },
)
Avatars.displayName = 'Avatars'
